import Home from '@/views/Home.vue'

export default [
  {
    path: '/',
    name: 'home',
    component: Home,
    props: route => {
      return {
        food: route.query.food
      }
    },
    // 路由独享守卫
    beforeEnter: (to, from, next) => {
      console.log(from.name)
      next()
    }
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/Login.vue')
  },
  {
    path: '/count-page',
    name: 'countPage',
    component: () => import('@/views/CountPage.vue'),
    meta: {
      title: '第三方组件'
    }
  },
  {
    path: '/split-pane',
    name: 'splitPane',
    component: () => import('@/views/SplitPane.vue'),
    meta: {
      title: '第三方组件'
    }
  },
  {
    path: '/store',
    name: 'store',
    component: () => import('@/views/Store.vue')
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue'),
    props: {
      food: 'banana'
    },
    meta: {
      title: '关于'
    }
  },
  {
    path: '/argu/:name',
    name: 'argu',
    component: () => import(/* webpackChunkName: "argu" */ '@/views/Argu.vue'),
    props: true
  },
  {
    path: '/parent',
    component: () => import(/* webpackChunkName: "parent" */ '@/views/Parent.vue'),
    children: [
      {
        path: 'children',
        component: () => import(/* webpackChunkName: "children" */ '@/views/Children.vue')
      }
    ]
  },
  {
    path: '/named-view',
    components: {
      default: () => import('@/views/Children.vue'),
      email: () => import('@/views/Email.vue'),
      tel: () => import('@/views/Tel.vue')
    }
  },
  {
    // 第一种重定向
    path: '/main1',
    redirect: '/'
  },
  {
    // 第二种重定向
    path: '/main2',
    redirect: {
      name: 'home'
    }
  },
  {
    // 第三种重定向
    path: '/main3',
    redirect: to => {
      return {
        name: 'home'
      }
    }
  },
  {
    // 第四种重定向
    path: '/main4',
    redirect: to => {
      return '/'
    }
  }
]
